<template>
  <div class="main">
    <div class="input-area" v-show="page.asideIndex == '1'">
      <div class="menu">
        <el-menu
          mode="horizontal"
          @select="tabChange"
          default-active="1"
          :ellipsis="false"
        >
          <el-menu-item index="1">选择图片</el-menu-item>
        </el-menu>
      </div>
      <div class="upload-area">
        <el-upload
          v-model:file-list="fileList"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :multiple="true"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-button type="warning" @click="fileList = []">清空图片</el-button>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </div>
    </div>

    <MainOptions v-show="['1', '2'].includes(page.asideIndex)"></MainOptions>
    <Temps v-if="page.asideIndex == '4'"></Temps>
    <div class="main-config-page" v-if="page.asideIndex == '3'">
      <ConfigPage></ConfigPage>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import MainOptions from "./MainOptions.vue";
import ConfigPage from "../configpage/ConfigPage.vue";
import Temps from "../Temps/Temps.vue"

import { ref } from "vue";
import type { UploadProps } from "element-plus";
import { useTtsStore } from "@/store/store";
import { storeToRefs } from "pinia";

const store = useTtsStore();
const { fileList, page } = storeToRefs(store);

const tabChange = (index: number) => {
  page.value.tabIndex = index.toString();
};

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>

<style scoped>
.main {
  background-color: #f2f3f5;
  margin-bottom: 5px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  display: flex;
  justify-content: space-between;
}
.input-area {
  width: 100% !important;
  border-radius: 5px !important;
  height: calc(100vh - 100px);
  overflow-y: scroll;
}
.main-config-page {
  width: 100%;
  height: calc(100vh - 102px);
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  overflow: hidden;
}
.table-tool {
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  height: 68px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.menu .el-menu {
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  height: 30px;
}
/* :deep(.el-upload-list) {
  display: none;
} */
:deep(.el-textarea__inner) {
  height: calc(100vh - 130px);
  resize: none;
  border-radius: 5px !important;
}
:deep(textarea::-webkit-scrollbar) {
  width: 5px;
}
:deep(textarea::-webkit-scrollbar-thumb) {
  width: 5px;
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgb(183, 192, 201);
  transition: 0.3 background-color;
  opacity: 0.3;
}
.upload-area {
  height: 100%;
}
.upload {
  display: block;
}
:deep(.el-dialog) {
  --el-dialog-margin-top: 2vh;
}
:deep(.el-dialog__body img) {
  width: 100%;
}
</style>
